<script setup lang="ts">
import {
  ref,
  reactive
} from 'vue'

const props = defineProps(['type','content'])
const painter = ref(null)
const shareLine = () => {
  painter.value.open()
}
const clearHtml = (html) => {
  //截取200字
  html = html.substring(0, 150);
  html.replace(/<[^>]+>/g, '');
  //删除<br>
  html = html.replace(/<br\s*\/?>/mg, '');
  return html+'...';
}
const path = ref('')
const paintersuccess = (e) => {
  console.log(e)
  paintersuccessimg.value = res
}
const closePopup = () => {
  painter.value.close()
}
const save = () => {
  uni.saveImageToPhotosAlbum({
    filePath: path.value,
    success: function () {
      painter.value.close()
      uni.showToast({
        title: '保存成功'
      })
    },
    complete: function (r) {
      console.log(r)
    }
  })
}
</script>

<template>

  <uni-popup ref="painter">
    <scroll-view class="painter" :scroll-y="true">
      <l-painter
          pixel-ratio="10"
          @success="path = $event"
          isCanvasToTempFilePath
          css="width:80vw;padding-bottom: 40rpx;background: #fff;background-image:url(https://wz.mala.cn/static/img/water2025new1.png);background-size:10%;background-repeat:repeat">
        <l-painter-image
            src="https://wz.mala.cn/static/img/xcxbanner1.jpg"
            css=" width: 100%"
        />
        <l-painter-view
            css="margin-top: 30rpx; padding-left: 50rpx;padding-right: 30rpx;"
        >
          <l-painter-text
              :text="props.content.title"
              css="color: #000; font-size: 46rpx;text-align:center"
          />

        </l-painter-view>


        <l-painter-view
            css="margin-top: 10rpx;text-align:center"
        >
          <l-painter-text
              :text="`@${props.content.u_name}`"
              css="color: #999; font-size: 24rpx;display:inline-block"
          />
        </l-painter-view>

        <l-painter-view
            css="margin-top: 40rpx; padding-left: 50rpx;padding-right: 50rpx;"
        >
          <l-painter-text
              :text="clearHtml(props.content.content)"
              css="color: #344; font-size: 32rpx;line-height:48rpx"
          />
          <l-painter-text
              text="文中含有图片，请扫码查看"
              v-if="props.content?.image?.length>0"
              css="color: #5fb1fa; font-size: 28rpx;margin-top:40rpx;"
          />
        </l-painter-view>

        <l-painter-view
            css="margin-top:50rpx;display:flex;align-items:center;justify-content:center"
        >
          <l-painter-image
              src="https://res.wx.qq.com/wxdoc/dist/assets/img/WXACode.fa3d686a.png"
              css="width:170rpx;height:170rpx;"
          />
          <l-painter-view css="margin-left:70rpx;">
<!--            <l-painter-view>-->
<!--              <l-painter-text-->
<!--                  text="四川群众呼声"-->
<!--                  css="color: #000; font-size: 28rpx;"-->
<!--              />-->
<!--            </l-painter-view>-->

            <l-painter-view>
              <l-painter-text
                  text="长按识别小程序码"
                  css="color: #000; font-size: 28rpx;"
              />
            </l-painter-view>

            <l-painter-view>
              <l-painter-text
                  text="查看原文"
                  css="color: #000; font-size: 28rpx;"
              />
            </l-painter-view>


          </l-painter-view>
        </l-painter-view>
      </l-painter>

    </scroll-view>
    <view class="next uni-row" style="margin:30rpx 0 0 0;">
		
		  <view style="flex:1;margin-right:10rpx;"><uv-button type="primary" text="取消"  plain  size="large" @click="closePopup"></uv-button></view>
		  <view  style="flex:1;margin-left:10rpx;"><uv-button type="primary" text="保存图片"  size="large" @click="save"></uv-button></view>

      
    </view>
  </uni-popup>


  <view v-if="type=='view'" class="viewShare">
	<!-- #ifdef MP-WEIXIN -->
		<view class="wechat">
		  <image src="/static/icon/wechat.png" style="width:40rpx;height:40rpx;"></image>
		  微信
		</view>
		<view class="wechat_line" @click="shareLine">
		  <image src="/static/icon/line.png"></image>
		  朋友圈
		</view>
	<!-- #endif -->
  </view>

</template>

<style scoped lang="scss">
.painter{
  width:80vw;
  height:75vh;
}
.viewShare {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;

  image {
    width: 38rpx;
    height: 38rpx;
    margin-right: 10rpx;
  }

  > view {
    background: #f7f7f7;
    border-radius: 8rpx;
    flex: 1;
    padding: 20rpx;
    font-size: 30rpx;
  }

  .wechat {
    margin-right: 14rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wechat_line {
    margin-left: 14rpx;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

